<template>
    <div class="red-item">
        <img class="cover" @load="$emit('img-load')" :src="cover" />

        <p class="type">
            <template v-if="data.red_type === 'default'">普通红包</template>
            <template v-else-if="data.red_type === 'image'">图片红包</template>
            <template v-else>视频红包</template>
            <span v-if="data.status === '4'">(已停止)</span>
        </p>

        <p class="number">红包数量：{{data.numbered}}/{{data.number}}</p>

        <div class="bottom">
            <img v-lazy="data.owner_header" @load="$emit('img-load')" class="header" />
            <div class="title">{{data.title}}</div>
        </div>

    </div>
</template>

<script>
// 红包列表单个组件
import redCover from "@/assets/images/red-cover.png"
export default {
    name: "red-item",
    computed: {
      // 红包封面
      cover () {
          let cover;
          if(this.data.red_type === "default") {
              cover = redCover
          } else {
             cover = this.data.cover
          }
          return cover;
      }
    },
    props: {
        data: {
            type: Object,
            default() {
                return {
                    id: 1,
                    red_type: 'default',
                    cover: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=511947089,3178023883&fm=26&gp=0.jpg"
                }
            }
        }
    }
}
</script>

<style scoped lang="less" src="./red-item.less"></style>
